import React from 'react'
import { TabBar } from 'antd-mobile'
import {
  useNavigate,
  useLocation,
} from 'react-router-dom'
import {
  AppOutline,
  EditSOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

import './index.css'


export default function Bottom() {
  const navigate = useNavigate()
  const location = useLocation()
  const { pathname } = location

  const setRouteActive = (value) => {
    navigate(value,{
      replace:true
    })
  }
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/blog',
      title: '博客',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/edit',
      title: '管理',
      icon: <EditSOutline />,
    },
    {
      key: '/my',
      title: '我的',
      icon: <UserOutline />,
    },
  ]
  
  return (
    <>
      <div style={{height:'50px'}}>
      </div>
      <TabBar className='bottom' activeKey={pathname} onChange={value => setRouteActive(value)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </>
  )
}
